<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '',
	navigationStyle: 'custom',
	disableScroll: true, // 微信禁止页面滚动
	'app-plus': {
	bounce: 'none', // 禁用 iOS 弹性效果
	},
	},
	}
</route>

<template>
	<PageLayout :navbarShow="false">

		<view class="wrap" :style="{
		    '--nav-height': `${statusBarHeight + navHeight}px`,
		    '--status-bar-height': `${statusBarHeight}px`,
			'margin-top':`${rightButtonMarginTopHeight}px`
		  }">
			车辆管理
		</view>

		<view class="choose-car-item-container" :style="{
			'--topheight':`${rightButtonMarginTopHeight + 32}px`
		}">
			<view class="option left" @click="nextPage('left')">
				<wd-icon name="arrow-left" size="22px"></wd-icon>
			</view>
			<scroll-view :scroll-left="scrollPosition" scroll-x enable-flex class="car-item-box" id="carBox">
				<view class="scroll-view">
					<view :class="['car-item',{'on-line':item.vehicleStatus == '1'}]" v-for="(item,index) in cars"
						:key="index" @click="getDefaultLocation(item)">
						<view class="base-info">
							<view class="car-icon">
								<image v-if="item.vehicleStatus == '1'" src="/src/static/car-icon2.png" mode=""></image>
								<image v-else src="/src/static/car-icon.png" mode=""></image>
							</view>
							<view class="car-number">
								{{item.licensePlate}}
							</view>
						</view>
						<view :class="['is-on-line',{'on-line':item.vehicleStatus == '1'}]">
							<span>{{item.vehicleStatus == '1' ? '在线' :'离线'}}</span>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="option right" @click="nextPage('right')">
				<wd-icon name="arrow-right" size="22px"></wd-icon>
			</view>
		</view>

		<!-- <view class="back-default-local" @click="goBackDefaultLocaltion">
			<wd-icon name="rollback" size="22px"></wd-icon>
		</view> -->

		<view class="map-container" :style="{
			'--height':`calc(100% - ${rightButtonMarginTopHeight + 32}px)`,
		}">
			<map id="map" style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude"
				:markers="marker" :scale="scales"></map>
			<!-- <view v-else class="empty-box">
				暂无数据
			</view> -->
		</view>
	</PageLayout>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive, nextTick } from 'vue'
	import { onShow, onHide, onLoad, onReady } from '@dcloudio/uni-app'
	import { http } from '@/utils/http'
	import { useToast } from 'wot-design-uni'
	import { useUserStore } from '@/store/user'
	import { useRouter } from '@/plugin/uni-mini-router'

	const toast = useToast()
	const globalData = getApp().globalData
	const { systemInfo, navHeight } = globalData
	const { statusBarHeight } = systemInfo

	const userStore = useUserStore()
	const router = useRouter()

	const cars = ref([])

	const latitude = ref(0)
	const longitude = ref(0)
	const marker = reactive([])
	const scales = ref(11)
	const mapCtx = ref()

	const getLocation = () => {
		uni.getLocation({
			type: 'gcj02',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude)
				console.log('当前位置的纬度：' + res.latitude)
				latitude.value = res.latitude
				longitude.value = res.longitude
				getCarsLocalction()
			},
			fail: function (res) {
				uni.showModal({
					content: "请授权定位",
					confirmColor: "#36d6b2",
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (res) => {
									console.log(res, 'second========');
								},
								fail() {
									uni.showModal({
										title: '提示',
										content: '获取位置信息失败，请在设置中打开定位服务',
										showCancel: false
									})
								}
							})
						} else {
							uni.showModal({
								title: '提示',
								content: '获取位置信息失败，请在设置中打开定位服务',
								showCancel: false,
								success() {
									uni.reLaunch({
										url: "/pages/index/index"
									})
								}
							})
						}
					},
				})
			},
		})
	}

	function getCarsLocalction() {
		uni.showLoading({
			title: '获取车辆信息中'
		});
		http.post('/zbVehicle/zbVehicle/track')
			.then((res : any) => {
				if (res.success) {
					const arr = res.result
					if (arr.length == 0) return
					latitude.value = arr[0].latitude
					longitude.value = arr[0].longitude
					const filterArr = arr.filter(item => {
						if (item.latitude && item.longitude) {
							return item
						}
					})
					filterArr.forEach((item, index) => {
						marker.push({
							id: index,
							latitude: item.latitude, //纬度
							longitude: item.longitude, //经度
							iconPath: '/static/location.png', //显示的图标
							rotate: 0, // 旋转度数
							width: 20, //宽
							height: 26, //高
							title: item.licensePlate, //标注点名
							alpha: 1, //透明度
							// callout: {
							// 	content: item.licensePlate, //文本
							// 	color: '#ffffff', //文字颜色
							// 	fontSize: 14, //文本大小
							// 	borderRadius: 2, //边框圆角
							// 	padding: 5,
							// 	bgColor: '#00c16f', //背景颜色
							// 	display: 'ALWAYS', //常显
							// },
						})
					})
					// marker.push({
					// 	id: 0,
					// 	latitude: latitude.value, //纬度
					// 	longitude: longitude.value, //经度
					// 	iconPath: '/static/location.png', //显示的图标
					// 	rotate: 0, // 旋转度数
					// 	width: 30, //宽
					// 	height: 30, //高
					// 	alpha: 0.5, //透明度
					// 	callout: {
					// 		//自定义标记点上方的气泡窗口 点击有效
					// 		content: '我的位置', //文本
					// 		color: '#ffffff', //文字颜色
					// 		fontSize: 14, //文本大小
					// 		padding: 5,
					// 		borderRadius: 0, //边框圆角
					// 		bgColor: '#0085fe', //背景颜色
					// 		display: 'ALWAYS', //常显
					// 	},
					// })
					cars.value = arr
					uni.hideLoading();
					console.log(marker, cars.value, filterArr, 'cars================')
				}
			})
			.catch((err) => {
				console.log(err)
				uni.hideLoading();
			})
	}

	const scrollPosition = ref(50);
	const totalLength = ref(0);
	function nextPage(direction) {
		if (direction === 'right') {
			scrollPosition.value += 80
		}
		if (direction === 'left') {
			scrollPosition.value -= 80
		};
	}

	function getDefaultLocation(item) {
		if (!item.latitude || !item.longitude) {
			toast.show('车辆无定位信息！')
			return
		}
		mapCtx.value.moveToLocation({
			latitude: Number(item.latitude),
			longitude: Number(item.longitude),
		});
		// scales.value = 16
	}

	function goBackDefaultLocaltion() {
		mapCtx.value.moveToLocation({
			latitude: Number(latitude.value),
			longitude: Number(longitude.value),
		});
		scales.value = 16
	}

	const rightButtonMarginTopHeight = ref(0)
	onShow(() => {
		marker.length = 0
		const rightButton = uni.getMenuButtonBoundingClientRect()
		rightButtonMarginTopHeight.value = rightButton.top
		// 获取地图上下文对象
		const ctx = getCurrentInstance();
		mapCtx.value = uni.createMapContext("map", ctx);
		if (userStore.isLogined) {
			getLocation()
			// getCarsLocalction()
		} else {
			toast.warning("请登录后查看")
		}
	})
</script>

<style lang="scss" scoped>
	//
	.wrap {
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFF;
		z-index: 999;
	}

	.choose-car-item-container {
		position: absolute;
		top: var(--topheight);
		z-index: 999;
		height: 160rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: rgba(251, 251, 251, 0.9);
		box-shadow: rgba(255, 255, 255, 0.7) 0px 10px 10px -20px;
	}

	.back-default-local {
		padding: 10px;
		background-color: #FFF;
		border-radius: 10px;
		position: absolute;
		right: 0px;
		bottom: 30%;
		z-index: 999;
	}

	.map-container {
		width: 100%;
		height: var(--height);

		.empty-box {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFF;
		}
	}

	.option {
		height: 100%;
		// width: 30rpx;
		// background-color: red;
		display: flex;
		align-items: center;
		color: #19a885;
	}

	.car-item-box {
		align-items: center;
		box-sizing: border-box;
		flex: 1;
		// height: 53px;
		width: calc(100% - 80rpx);
		min-width: 145px;
		height: 100%;
		// display: flex;
		gap: 30rpx;
		overflow-x: auto;
		white-space: nowrap;
		// position: relative;
		// box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.2);	

		.scroll-view {
			// position: absolute;
			flex: 1;
			gap: 20rpx;
			display: flex;
		}
	}

	.car-item {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 10rpx 20rpx;
		width: 110px;
		height: 100%;
		box-sizing: border-box;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		background-color: #ffffff;
		border: 3rpx solid rgb(167, 167, 167);

		.base-info {
			font-size: 26rpx;
			width: 100%;
			display: flex;
			gap: 16rpx;
			align-items: center;
			justify-content: space-between;

			.car-icon {
				width: 36rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.car-number {
				font-size: 22rpx;
			}
		}

		.is-on-line {
			margin-left: auto;
			width: 86rpx;
			height: 100%;
			background-color: #999999;
			border-radius: 20rpx;
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;

			span {
				margin-bottom: 1rpx;

				&:before {
					display: inline-block;
					content: '';
					width: 5rpx;
					height: 5rpx;
					margin-bottom: 10rpx;
					margin-right: 5rpx;
					background-color: #FFF;
					border-radius: 50%;
				}
			}
		}

		.on-line {
			background-color: #2ed4ae;
		}
	}

	.on-line {
		border-color: rgb(84, 219, 188);
	}
</style>